import React, { useState } from "react";
import { View, StyleSheet, Dimensions, Text, StatusBar, TouchableOpacity, Image } from "react-native";
import { Icon, Button, Input } from "@rneui/themed";
import Toast from 'react-native-simple-toast'
import { Shadow } from "react-native-shadow-2";
import ScanModal from '@/components/ScanModal'
import CommonContext from '@/utils/createContext'
import { getValue, setObjectValue } from "@/utils/deviceStorage";

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const AddAddress = (props) => {

    const [label, setLabel] = useState('');
    const [address, setAddress] = useState('');
    const [scanVisible, setScanVisible] = useState(false)

    const handlePressAdd = () => {
        if (address && label) {
            let list = getValue('addressBook')
            let isRepeat = false
            if (list && list.length > 0) {
                for (let item of list) {
                    if (item.address === address) {
                        isRepeat = true
                        break
                    }
                }
                if (isRepeat) {
                    Toast.showWithGravity(
                        'address aleardy exist',
                        Toast.SHORT,
                        Toast.CENTER)
                } else {
                    list = list.concat([{
                        label,
                        address
                    }])
                    setObjectValue('addressBook', list)
                    props.navigation.goBack()
                }
            } else {
                list = [].concat([{
                    label,
                    address
                }])
                setObjectValue('addressBook', list)
                props.navigation.goBack()
            }
        }
    }

    const handleReadCode = (result) => {
        const { data } = result;
        setAddress(data || '')
    }

    return (
        <View style={styles.container}>
            {/* headerContent */}
            <View>
                <StatusBar backgroundColor='#5B6DFD' barStyle='light-content' />
                <View style={styles.titleContent}>
                    <View style={{ flexDirection: 'row', width: width, alignItems: 'center', justifyContent: 'space-between', marginTop: 13 * ratio }}>
                        <View style={{ flex: 2 }}>
                            <Icon type="antdesign" name="left" size={16} color='#FFFFFF' style={{ marginLeft: 15 * ratio }}
                                onPress={() => props.navigation.goBack()} />
                        </View>
                        <View style={{ flex: 6, alignItems: 'center' }}>
                            <Text style={styles.title2}>Add Address</Text>
                        </View>
                        <View style={{ flex: 2 }}></View>
                    </View>
                </View>
            </View>
            {/* bodyContent */}
            <View style={{ flex: 1 }}>
                <View style={{ alignItems: 'center', marginTop: 12 * ratio }}>
                    <Shadow offset={[3, 6]}
                        distance={0} startColor='rgba(0,0,0,0.16)' finalColor='transparent' radius={5}>
                        <View style={styles.inputContent}>
                            <View style={{ width: 305 * ratio, height: 168 * ratio }}>
                                <Text style={{ ...styles.title3, marginTop: 19 * ratio }}>Label</Text>
                                <Input
                                    containerStyle={styles.textInput1}
                                    rightIcon={<Icon type="antdesign" name="closecircleo" size={17} color='#9D9D9D'
                                        onPress={() => setLabel('')} />}
                                    onChangeText={text => setLabel(text)}
                                    value={label}
                                    placeholder='Less than 20 words...'
                                    placeholderTextColor='#9D9D9D'
                                    inputContainerStyle={{ borderBottomWidth: 0 }}
                                    inputStyle={{ ...styles.title3, fontWeight: '400' }}
                                />
                                <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                                    <Text style={styles.title3}>Address</Text>
                                    <Input
                                        containerStyle={{ ...styles.textInput2, marginLeft: 5 * ratio }}
                                        onChangeText={text => setAddress(text)}
                                        value={address}
                                        placeholder='Input address...'
                                        placeholderTextColor='#9D9D9D'
                                        inputContainerStyle={{ borderBottomWidth: 0 }}
                                        inputStyle={{ ...styles.title3, fontWeight: '400' }}
                                    />
                                    <TouchableOpacity onPress={() => setScanVisible(true)} style={{ alignItems: 'center' }}>
                                        <Text style={{ ...styles.title3, color: '#9D9D9D', fontWeight: '400' }}>Scan</Text>
                                        <Image source={require('@/assets/imgs/ewm.png')}
                                            style={{ width: 22 * ratio, height: 22 * ratio, marginTop: 5 * ratio }} />
                                    </TouchableOpacity>
                                </View>
                            </View>
                        </View>
                    </Shadow>
                </View>
                <View style={{ alignItems: 'center', marginTop: 20 * ratio }}>
                    <Shadow offset={[3, 6]}
                        distance={0} startColor='rgba(0,0,0,0.16)' finalColor='transparent' radius={7}>
                        <Button buttonStyle={styles.button} onPress={handlePressAdd}>
                            <Text style={styles.title1}>Add</Text>
                        </Button>
                    </Shadow>
                </View>
            </View>
            <CommonContext.Provider value={{ modalVisible: scanVisible, setModalVisible: setScanVisible, handleReadCode }}>
                <ScanModal />
            </CommonContext.Provider>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5F6FA'
    },
    titleContent: {
        width: width,
        height: 54 * ratio,
        backgroundColor: '#5B6DFD'
    },
    inputContent: {
        width: 340 * ratio,
        height: 168 * ratio,
        backgroundColor: '#FFFFFF',
        borderRadius: 5,
        alignItems: 'center'
    },
    textInput1: {
        width: 305 * ratio,
        height: 44 * ratio,
        backgroundColor: '#F5F6FA',
        borderRadius: 6,
        marginTop: 9 * ratio
    },
    textInput2: {
        width: 220 * ratio,
        height: 44 * ratio,
        backgroundColor: '#F5F6FA',
        borderRadius: 6
    },
    button: {
        width: 340 * ratio,
        height: 55 * ratio,
        backgroundColor: '#5B6DFD',
        borderRadius: 7
    },
    title1: {
        fontSize: 17,
        fontFamily: 'Microsoft YaHei',
        fontWeight: 'bold',
        color: '#FFFFFF',
        lineHeight: 23
    },
    title2: {
        fontSize: 15,
        fontFamily: 'Microsoft YaHei',
        fontWeight: 'bold',
        color: '#FFFFFF',
        lineHeight: 20
    },
    title3: {
        fontSize: 12,
        fontFamily: 'Microsoft YaHei',
        fontWeight: 'bold',
        color: '#262626',
        lineHeight: 15
    }
})
export default AddAddress